<template>
  <div class="cp-wrapper">
    <van-loading v-show="!trojan.length" type="circular" color="#fff" vertical>加载木马轮播分类...</van-loading>
    <swiper
      v-if="trojan.length > 0"
      class="swiper-trojan-wrap w700 release-swiper"
      :options="swiperOptions"
      ref="mySwiper"
    >
      <swiper-slide class="swiper-slide release-slide" v-for="(item,index) in trojan" :key="index">
        <div class="img-bg" :style="{backgroundImage:'url('+item.picUrl+')'}">
          <p class="desc">
            <i class="iconfont iconyousanjiao"></i>
            <span>{{item.playCount | playNumFormat}}</span>
          </p>
          <div class="play-circle">
            <i class="iconfont icontriangle"></i>
          </div>
        </div>
        <div class="release-info">
          <h4>{{item.name}}</h4>
        </div>
        <div class="mask"></div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// import Swiper from "swiper";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import { getRecommend } from "@/request/api";
import { hasClass, getData } from "@/utils/dom.js";
let vm = null;
export default {
  props: {
    trojan: {
      type: Array,
      default: []
    }
  },
  computed: {},
  data() {
    return {
      Trojan2: [],
      swiperOptions: {
        initialSlide: 0,
        autoplay: {
          enabled: true,
          disableOnInteraction: false,
          delay: 3000
        },
        loop: true,
        centeredSlides: true,
        centeredSlidesBounds: true,
        init: true,
        effect: "coverflow",
        slidesPerView: "auto",
        observer: true,
        observeParents: true,
        coverflowEffect: {
          rotate: 0,
          stretch: "13%", //每个slide之间拉伸值（负值远离） 5.3.6 后可使用%百分比免去计算
          depth: 140, //值越大图片越往后退（可负值）
          modifier: 2,
          shadows: false
        },
        on: {
          tap: function(event) {
            // 判断点击的是哪一个
            let clickedSlide = this.clickedSlide;
            let isAcitve = hasClass(clickedSlide, "swiper-slide-active");
            let isNext = hasClass(clickedSlide, "swiper-slide-next");
            let isPrev = hasClass(clickedSlide, "swiper-slide-prev");
            isNext ? this.slideNext() : "";
            isPrev ? this.slidePrev() : "";
            if (isAcitve) {
              let item = vm.trojan[this.realIndex];
              vm.$emit("handleClick", item);
            }
          }
        }
      }
    };
  },
  created() {
    vm = this;
  },
  components: {
    Swiper,
    SwiperSlide
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.swiper-trojan-wrap {
  margin-top: 0.72rem;
}

.release-swiper {
  padding-bottom: 0.42rem;
  .swiper-pagination {
    position: relative;
    margin-top: 0.5rem;
    .swiper-pagination-bullet {
      border-radius: 0 !important;
      width: 0.16rem;
      height: 0.08rem;
      .tf3;
      background-color: #eeeeee;
      opacity: 1 !important;

      &.swiper-pagination-bullet-active {
        background-color: @mc !important;
        width: 0.6rem;
      }

      &:nth-child(2) {
        background-color: #eb6100;
      }

      &:nth-child(3) {
        background-color: #f8b551;
      }

      &:nth-child(4) {
        background-color: #fff45c;
      }
    }
  }
}

.release-slide {
  width: 4.6667rem;
  // width: 204px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: block;

  .img-bg {
    width: 100%;
    .bz(cover);
    height: 4.5333rem;
    position: relative;
    .desc {
      position: absolute;
      top: 4px;
      right: 5px;
      font-size: 12px;
      .flex-row-nowrap(center);
      z-index: 6;
      span {
        margin-left: 2px;
      }
    }
    .play-circle {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(24, 24, 24, 0.7);
      transform: scale(0);
      .tf3;
      i {
        .posc;
        font-size: 18px;
        color: #dd001b;
      }
    }
  }

  .release-info {
    padding: 0.2rem 0.24rem;
    background-color: #454545;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    overflow: hidden;
    h4 {
      font-size: 14px;
      line-height: 20px;
      height: 40px;

      color: #fff;
    }
  }

  .mask {
    .posfull;
    background-color: rgba(0, 0, 0, 0.66);
  }

  &.swiper-slide-active {
    box-shadow: 0 8px 20px rgba(24, 24, 24, 0.3);
    .mask {
      background-color: rgba(0, 0, 0, 0.11);
    }
    .img-bg {
      .play-circle {
        transform: scale(1);
      }
    }
  }

  &.swiper-slide-prev,
  &.swiper-slide-next {
    .mask {
      background-color: rgba(0, 0, 0, 0.33);
    }
  }
}
</style>